<template>
	<view>
		<view @touchstart="hideDrawer">
			<view class="norm" @click="test">
				规范
			</view>
			<!-- <view  class="chat-notice">
		  欢迎{{l.message}}加入群聊
		</view> -->
			<view class="requirement" v-if="rule">
				<text>
					拒绝黄赌毒：禁止在群聊中传播黄、赌、毒等非法行为。
					不发送广告：禁止发送广告、推销、垃圾信息等内容。
					不发布政治敏感内容：避免在群聊中讨论政治话题。
					不传播虚假信息：禁止在群聊中散布虚假消息和谣言，以避免误导和混乱。
					尊重隐私：不要在群聊中散布他人的个人隐私信息。
					遵守版权规定：请确保你有相关内容的版权或授权。不要非法分享他人的作品或侵犯知识产权。
					禁止恶意行为：禁止在群聊中进行恶意攻击、骚扰、诽谤等行为。
				</text>
				<view class="confirm" @click="close">
					确定
				</view>
			</view>
			<scroll-view scroll-y="true" :scroll-into-view="scrollId" :style="{height: `calc(100vh - ${offset}rpx)`}"
				class="scroll">
				<view v-for="(l,i) in list" :id="'scroll'+l.messageID" :key="i" class="chat-wrap">
					<!-- direction=0是自己 1是对面  -->
					<!-- 对话时间 -->
					<view v-if="l.subType==1" class="chat-time">
						<text>{{l.time}}</text>
					</view>
					<!-- 					<view v-else-if="l.subType==91&&isShow==1" class="chat-notice">
						欢迎{{l.message}}加入群聊
					</view> -->
					
					<!-- 对话结构 -->
					<view v-else :class="{'flex-flow':l.direction == 0}" class="chat-item">
						<!-- 头像 -->
						<view class="chat-head" @click="view_user(l.senderUserID)" v-if="l.subType!=91">
							<image :src="getChatAvatar(l.senderUserID)" mode="aspectFill"></image>
						</view>
						<!-- 我的微信号 -->
						
						
						<view v-if="l.type==1" class="chat-content">
							<rich-text :nodes="l.message"></rich-text>
						</view>
						<!-- 图片 -->
						<view v-if="l.type==11" class="chat-imgs"
							:style="{width: l.thumbnailWidth + 'px',height: (l.thumbnailHeight>220?220:l.thumbnailHeight) + 'px'}">
							<image @click="previewImage(l.largeImageDownloadUrl)" :src="l.largeImageDownloadUrl" mode="aspectFill">
							</image>
						</view>
						<!-- 音频 -->
						<view v-if="l.type==13" @click="playVoice(l.fileDownloadUrl,i)"
							:style="{width:`${getWidth(l.fileSize)}rpx`}" class="chat-voice">

							<block v-if="l.direction == 0">{{l.fileSize}}<span>"</span>
								<!-- <image class="bo-image" src="/static/img/yuyin_bobao.png" mode=""> </image> -->
								<view class="wifi-symbol" :class="{animation:playMsg.i==i&&playMsg.play==0}">
									<view class="wifi-circle first"></view>
									<view class="wifi-circle second"></view>
									<view class="wifi-circle third"></view>
								</view>
							</block>
							<block v-else>
								<view class="wifi-symbol direction" :class="{animation:playMsg.i==i&&playMsg.play==0}">
									<view class="wifi-circle first"></view>
									<view class="wifi-circle second"></view>
									<view class="wifi-circle third"></view>
								</view>{{l.fileSize}}<span>"</span>
							</block>
						</view>
					</view>

				</view>
				<view class="fit-bottom"> </view>
			</scroll-view>
		</view>
		<!-- 功能区域 -->
		<view :class="moreClass" class="chat-more">
			<view @click="getImage('album')" class="chat-cell">
				<view class="chat-icon">
					<uni-icons type="image" size="34" color="#333" />
				</view>
				<text>相册</text>
			</view>
			<view @click="getImage('camera')" class="chat-cell">
				<view class="chat-icon">
					<uni-icons type="camera-filled" size="34" color="#333" />
				</view>
				<text>拍摄</text>
			</view>
			<view class="chat-cell" @click="toGroupMember">
				<view class="chat-icon">
					<uni-icons type="staff-filled" size="34" color="#333" />
				</view>
				<text>群成员</text>
			</view>
			
		</view>
		<!-- 底部输入栏 -->
		<view class="chat-box" :class="{'more-show':moreClass=='more-show','fit-bottom':inputBottom==0}"
			:style="{ bottom: inputBottom + 'px  !important' }">
			<view @click="changeEvent" class="box-switch">
				<image v-if="changeType==2" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/text.png" mode="">
				</image>
				<image v-if="changeType==1" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/yuyin.png" mode="">
				</image>
			</view>
			<view v-if="changeType==1" class="box-input">
				<textarea auto-height="true" confirm-type="send" :confirm-hold="true" :disable-default-padding="true"
					cursor-spacing="15" :show-confirm-bar="false" :adjust-position="false" @blur="inputBottom=0" v-model="content"
					@confirm="sendEvent"></textarea>
			</view>
			<view v-if="changeType==2" class="box-input box-btn" @touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng"
				@touchend="voiceEnd" @touchcancel="voiceCancel">
				{{voiceTis}}
			</view>
			<view @click="moreEvent" class="box-add">
				<uni-icons type="plus" size="34"></uni-icons>
				<!-- <image src="https://oss.haochongzb.com/app_ui/chat_add.png" mode=""></image> -->
			</view>
			<view v-if="changeType==1" class="box-send" @click="sendEvent"> 发送 </view>
		</view>
		<!-- 录音UI效果 -->
		<view class="record" :class="recording ? '' : 'hidden'">
			<view class="ing" :class="willStop ? 'hidden' : ''">
				<view class="icon luyin2"></view>
			</view>
			<view class="cancel" :class="willStop ? '' : 'hidden'">
				<view class="icon chehui"></view>
			</view>
			<view class="tis" :class="willStop ? 'change' : ''">{{ recordTis }}</view>
		</view>
		<!-- 红包弹出层-->

		<!-- 赠送礼物弹出层 -->


		<!-- 商城列表 -->

	</view>
</template>

<script>
	import config from 'uview-ui/libs/config/config';
	import {
		mapState
	} from 'vuex'
	const time = 1000 * 60 * 5;
	export default {
		computed: {
			...mapState(['msgTimeStamp']),
			// 时间格式
			format_time() {
				return time => {
					return this.$util.dateUtils.format_chat(Math.floor(time / 1000));
				};
			}
		},
		data() {
			return {
				sum: 0, //选中商品数量
				selectGoods: [], //选中商品id数组
				// 商品数组
				goodsList: [],
				convInfo: {}, //对话的人的相关信息
				userID: 0, //用户id
				list: [], //对话相关数组
				userList: [], //对话用户们(两个)
				page: 1, //当前页面
				status: 'loading', //状态
				top: 0, //顶部距离
				focus: false, //聚焦对话最底部
				inputBottom: 0, //input框底部
				offset: 105, //  
				changeType: 1,
				moreType: false,
				scrollId: 'id',
				moreClass: '',
				content: '',
				isByte: false,
				//播放语音相关参数
				AUDIO: uni.createInnerAudioContext(),
				playMsg: {
					i: -1,
					play: -1
				},
				//录音相关参数
				// #ifndef H5
				//H5不能录音
				RECORDER: uni.getRecorderManager(),
				// #endif
				voiceTis: '按住 说话',
				recordTis: '手指上滑 取消发送',
				recording: false,
				willStop: false,
				initPoint: {
					identifier: 0,
					Y: 0
				},
				recordTimer: null,
				recordLength: 0,
				price: 0, //价格
				gift: [], //礼物数组
				gift_active: -1, //当前选中礼物
				lastTime: 0, //最后聊天时间
				rule: false, //规则
				userinfo: [], //用户信息

				accept_gift_name: '', //获取礼物的名字
				accept_gift_price: '', //获取礼物的价格

				groupList: [], //群组的列表
				groupListCount: 0, //群成员数
				groupNameList: [], //群里成员
				packetList: [], //领取红包列表
				isbool: false, //控制领取红包时显示于隐藏
				isShow: 1, //控制加入群聊时的通知显示
				remainingTime: 10, //控制加入群聊时的通知显示时间
				t: 0,
				user: {},
				alluserlist: [],
				alluserid: []
			};
		},
		async onShow() {
			// 触发商品礼物
			uni.$on('customSendMessage', this.customSendMessage)
			// 触发接受或者拒绝商品礼物
			uni.$on('goodsGiftSUb', this.goodsGiftSUb)
			this.tenSecondsCountdown()


		},
		async onLoad(e) {

			//判断用户是否注册会员
			this.checkUserAuth();
			let res = await this.$api.post('/Member/PageList', {
				PageIndex: 1,
				PageSize: 400
			});
			this.alluserlist = res.data
			// 聊天对象信息
			this.convInfo = e;
			const {
				type,
				id
			} = this.convInfo;
			// 修改导航栏标题
			uni.setNavigationBarTitle({
				title: e.name
			})
			// 判断登录状态
			if (await this.$store.getters.getLoginState) {
				// 赋值用户ID
				this.userID = uni.getStorageSync('user').UserID;
				// 添加页面路径
				await this.$api.post('/Common/Add_ViewPath', {
					Path: 'group_chat',
					Platform: uni.getStorageSync('platform')
				});

				//加载用户信息
				let res = await this.$api.post('User/GetUserInfo', {
					ID: this.userID
				});
				// 获取对话信息
				this.getList()
			}
			uni.$on('messageList', res => {
				res.forEach(item => {
					if (item.conversationID == this.convInfo.id) {
						if (!this.lastTime || item.timestamp - this.lastTime > time) {
							this.list.push({
								messageID: Math.random().toString().substr(2, 10),
								subType: 1,
								time: this.format_time(item.timestamp),
								amount: this.amount,
								count: this.count,
								red_id: Math.random().toString().substr(2, 10),
							})
							this.lastTime = item.timestamp
						}
						this.list.push(item);
						this.scrollBottom()
					}
				})
			})
			uni.onKeyboardHeightChange(res => {
				this.inputBottom = res.height - 2;
				if (res.height > 0) {
					this.hideDrawer(); //隐藏抽屉
				}
				setTimeout(() => {
					this.offset = 105 + res.height / (uni.upx2px(100) / 100)
					this.scrollBottom();
				}, 5)
			});
			//语音自然播放结束
			this.AUDIO.onEnded(res => {
				this.playMsg = {
					i: -1,
					play: -1
				};
			});
			// #ifndef H5
			//录音开始事件
			this.RECORDER.onStart(e => {
				this.willStop = false;
				this.recordBegin(e);
			});
			//录音结束事件
			this.RECORDER.onStop(res => {
				this.recordEnd(res);
			});
			// #endif

		},
		onUnload() {
			uni.offKeyboardHeightChange(() => {});
			uni.$off('customSendMessage')
			uni.$off('goodsGiftSUb')
		},
		watch: {
			// msgTimeStamp() {
			// 	console.log('====================================');
			// 	let res = this.$store.getters.getMsgList;
			// 	console.log(res, "-------------消息记录2")
			// 	res.forEach(item => {
			// 		if (item.conversationID == this.convInfo.id) {
			// 			if (!this.lastTime || item.timestamp - this.lastTime > time) {
			// 				this.list.push({
			// 					messageID: Math.random().toString().substr(2, 10),
			// 					subType: 1,
			// 					time: this.format_time(item.timestamp)
			// 				})
			// 				this.lastTime = item.timestamp
			// 			}
			// 			this.list.push(item);
			// 			this.scrollBottom()
			// 		}
			// 	})
			// }
		},
		methods: {
			// 测试
			async exitGroup() {
				const {
					type,
					id
				} = this.convInfo;
				this.alluserlist.forEach((item) => {
					let index = this.userList.findIndex((list) => list.userID == item.ID)
					if (index == -1) {
						this.alluserid.push(item.ID.toString()+'09')
						// console.log(item.ID.toString());
					}
				})
				this.$im.inviteUsersIntoGroup(this.alluserid.slice(0, 1), id).then((res) => {
				})
			},
			// 自己红包事件
			Ownenvelope(e) {
				const user = uni.getStorageSync('user')
				this.isbool = true
				const amount = parseInt(JSON.parse(e.message).amount).toFixed(2)
				const count = parseInt(JSON.parse(e.message).count)
				const red_id = JSON.parse(e.message).red_id
			},
			// 别人红包事件
			Otherenvelope() {
				this.isbool = true
			},
			// 拆红包事件
			async openPacket() {
				const {
					type,
					id
				} = this.convInfo;
				const user = uni.getStorageSync('user')
				const textMsg = user.Name
				this.$pv.msg('红包已领取')
				this.$pv.load()
				await this.$im.sendMessage2(200, JSON.stringify(textMsg), id, 2, 102).then(res => {
					console.log('.......红包', res);
					if (!this.lastTime || res.message.timestamp - this.lastTime > time) {
						this.list.push({
							messageID: Math.random().toString().substr(2, 10),
							subType: 1,
							time: this.format_time(res.message.timestamp),
						})
						this.lastTime = res.message.timestamp
					}
					this.list.push(res.message);
					this.scrollBottom();
					// console.log( this.list);
				})
				this.nav_to(`/pages/chat/draw_packet`)
				this.isbool = false
			},
			// 规则按钮
			test() {
				const {
					type,
					id
				} = this.convInfo;
				this.rule = true
			},
			close() {
				this.rule = false
			},
			toGroupMember() {
				const {
					type,
					id
				} = this.convInfo;
				this.nav_to(`/pages/chat/group_member?id=${id}`)
				this.hideDrawer();
			},

			// 控制加入群聊时的通知显示
			tenSecondsCountdown() {
				let countdown = setInterval(() => {
					if (this.remainingTime > 0) {
						this.remainingTime--;
						// console.log(this.remainingTime);
					} else {
						clearInterval(countdown);
						this.isShow = 0
					}
				}, 1000);
			},

			//  点击跳转对应的用户页面
			async view_user(id) {
				await this.$im.queryGroupMemberInfo(id.toString()+'09', this.convInfo.id)
				this.nav_to('/pages/user/user_visitor?id=' + id)
			},
			async getList() {
				const {
					type,
					id
				} = this.convInfo;
				// this.$im.queryUsersInfo([this.convInfo.id, this.userID + '']).then(list => {
				//   this.userList = list;
				// })
				this.$im.queryGroupMemberList(id, {
					count: 100,
					nextFlag: 0
				}).then(list => {
					this.userList = list.userList;
				})
				this.$im.msgHistory(this.convInfo.id, 2).then(res => {
					// console.log('=============',res.messageList);
					// console.log('------------',item);
					this.formatList(res.messageList)
				})
				return true;
			},
			formatList(list) {
				let l = [];
				for (let i = 0; i < list.length; i++) {
					if (!this.lastTime || list[i].timestamp - this.lastTime > time && list[i].subType != 91) {
						l.push({
							messageID: Math.random().toString().substr(2, 10),
							subType: 1,
							time: this.format_time(list[i].timestamp)
						})
						this.lastTime = list[i].timestamp
					}
					l.push(list[i])
				}
				this.list = l
				this.$nextTick(() => {
					this.scrollBottom();
				});
			},
			playVoice(fileDownloadUrl, i) {
				if (this.playMsg.i == i) {
					if (this.playMsg.play == 0) {
						this.playMsg = {
							i,
							play: 1
						};
						return this.AUDIO.pause();
					} else {
						this.playMsg = {
							i,
							play: 0
						};
						return this.AUDIO.play();
					}
				}
				this.playMsg = {
					i,
					play: 0
				};
				const l = this.list[i]
				this.AUDIO.src = fileDownloadUrl;
				console.log(fileDownloadUrl);
				this.$nextTick(function() {
					this.AUDIO.play();
				});
			},
			// 获取对应的头像
			getChatAvatar(userID) {
				let url = ""
				this.userList.forEach(item => {
					if (item.userID == userID) {
						url = item.memberAvatarUrl
					}
				});
				return url;
			},
			// 预览图片
			showPic(url) {
				uni.previewImage({
					indicator: 'none',
					current: url,
					urls: [url]
				});
			},
			// 发生消息相关逻辑
			sendEvent() {
				const {
					type,
					id
				} = this.convInfo;

				if (this.content == '') return;

				//========判断是否手机号码
				//需要去除中间空格内容
				let phone = this.content.replace(/\s/g, '');
				console.log(phone);
				if (this.isPhone(phone)) {

					this.$im.sendMessage(200, JSON.stringify({
						type: 'weixin'
					}), id, 92).then(res => {
						console.log('92------------', res)
						if (!this.lastTime || res.message.timestamp - this.lastTime > time) {
							this.list.push({
								messageID: Math.random().toString().substr(2, 10),
								subType: 1,
								time: this.format_time(res.message.timestamp)
							})
							this.lastTime = res.message.timestamp
						}
						this.list.push(res.message);
						this.scrollBottom();
					});

					this.$refs['weixin'].open();

					return;
				}

				//============违禁词处理===============
				let words = ['微信', '微', 'VX', 'V', '加V', '加微', 'WECHAT', 'WX', '手机号', '手机', '联系方式', '电话', '联系电话', '联系',
					'电联'
				];
				let is_end = false;

				words.forEach((w, i) => {
					//去掉字符中的空格
					w = w.replace(/\s/g, '');

					if (this.content.toUpperCase().indexOf(w) >= 0) {

						this.$im.sendMessage(200, JSON.stringify({
							type: 'weixin'
						}), id, 91).then(res => {
							console.log('91------------', res)
							if (!this.lastTime || res.message.timestamp - this.lastTime > time) {
								this.list.push({
									messageID: Math.random().toString().substr(2, 10),
									subType: 1,
									time: this.format_time(res.message.timestamp)
								})
								this.lastTime = res.message.timestamp
							}
							this.list.push(res.message);
							this.scrollBottom();
						});

						this.$refs['weixin'].open();

						is_end = true;
					}
				});

				if (is_end) return;
				//=============违禁词处理结束=============
				const textMsg = this.content;
				this.$im.sendChatMessage(type, textMsg, id, this.isByte).then((res) => {
					console.log('其他----------', res)
					if (!this.lastTime || res.message.timestamp - this.lastTime > time) {
						this.list.push({
							messageID: Math.random().toString().substr(2, 10),
							subType: 1,
							time: this.format_time(res.message.timestamp)
						})
						this.lastTime = res.message.timestamp
					}
					this.list.push(res.message);
					this.scrollBottom()
					this.content = '';
					this.focus = true
				});
			},
			// 去发红包的页面
			sendpacket() {
				const convInfo = {
					id: this.convInfo.id,
					type: this.convInfo.type,
				};
				const paramsString = '?' + Object.keys(convInfo).map(key => `${key}=${convInfo[key]}`).join('&');
				uni.navigateTo({
					url: '/pages/chat/red_packet' + paramsString,
				});
				// this.nav_to(`/pages/chat/red_packet?group=${}`)
				this.hideDrawer();
			},

			// 点击同意接收赠送礼物相关逻辑

			callEvent(roomType) {
				// #ifdef MP-WEIXIN
				this.$store.dispatch('chat/create', {
					roomType,
					chat_uuid: this.chat_uuid
				})
				// #endif
				return
				const options = {
					groupID: 'myGroups',
					userIDList: ['APP182'],
					callMediaType: 1, // 语音通话(callMediaType = 1)、视频通话(callMediaType = 2)
				};
				uni.$TUICallKit.groupCall(options, (res) => {
					console.log(res);
				});
			},
			changeEvent() {
				this.changeType = this.changeType == 1 ? 2 : 1
				if (this.changeType == 2) {
					this.hideDrawer();
				}
			},
			moreEvent() {
				this.moreType = this.moreType ? false : true
				if (this.moreType) {
					this.changeType = 1
					const stime = this.inputBottom > 0 ? 100 : 1
					setTimeout(() => {
						this.openDrawer();
					}, stime)
				} else {
					this.hideDrawer();
				}
			},
			scrollBottom() {
				if (this.list.length < 2) return
				let n = this.list.length
				this.scrollId = 'scroll' + this.list[n - 2].messageID
				setTimeout(() => {
					this.scrollId = 'scroll' + this.list[n - 1].messageID
				}, 10)
			},
			openDrawer() {
				this.moreClass = 'more-show';

				this.offset = 100 + 320;
				this.scrollBottom();
			},
			// 隐藏抽屉
			hideDrawer() {
				this.moreClass = '';
				this.moreType = false;
				this.offset = 100;
			},
			async onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				if (await this.getList()) {
					uni.$emit('triggered');
					this._freshing = false;
				}
			},
			showMore() {
				if (this.hideMore) {
					this.hideMore = false;
					this.openDrawer();
				} else {
					this.hideDrawer();
				}
			},
			getImage(type) {
				this.hideDrawer();
				const _this = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: [type], // 从相册选择
					async success(res) {
						// const imgs = await _this.$upload(res.tempFilePaths[0]);
						_this.$pv.load()
						const file = res.tempFiles[0];
						let localPath = file;
						// #ifdef MP-WEIXIN
						localPath = file.path;
						// #endif
						// #ifdef APP-PLUS
						localPath = plus.io.convertLocalFileSystemURL(file.path);
						// #endif
						_this.$im.sendMediaMessage({
								fileLocalPath: localPath,
								fileName: file.name || localPath.replace(/(wxfile)|(https?):\/\//, ''),
								fileSize: file.size,
								type: 11,
							},
							_this.convInfo.id, 2, {},
							(message, currentSize, totalSize) => {
								console.warn('file process', {
									message,
									currentSize,
									totalSize
								});
							},
						).then(res => {
							console.log(res.message, "---------look");
							if (!_this.lastTime || res.message.timestamp - _this.lastTime > time) {
								_this.list.push({
									messageID: Math.random().toString().substr(2, 10),
									subType: 1,
									time: _this.format_time(res.message.timestamp)
								})
								_this.lastTime = res.message.timestamp
							}
							_this.list.push(res.message);
							_this.scrollBottom()
							_this.$pv.closeLoad()
						})
					}
				});
			},
			setPicSize(content) {
				// 让图片最长边等于设置的最大长度，短边等比例缩小，图片控件真实改变，区别于aspectFill方式。
				let maxW = uni.upx2px(350); //350是定义消息图片最大宽度
				let maxH = uni.upx2px(350); //350是定义消息图片最大高度
				if (content.w > maxW || content.h > maxH) {
					let scale = content.w / content.h;
					content.w = scale > 1 ? maxW : maxH * scale;
					content.h = scale > 1 ? maxW / scale : maxH;
				}
				return content;
			},
			// 复制微信号
			copy(text) {
				// this.resData.WechatNo;
				let _this = this;
				uni.setClipboardData({
					data: text,
					success: function() {
						// _this.$pv.msg('复制')
					}
				});
			},
			// 录音开始
			voiceBegin(e) {
				if (e.touches.length > 1) {
					return;
				}
				this.initPoint.Y = e.touches[0].clientY;
				this.initPoint.identifier = e.touches[0].identifier;
				this.RECORDER.start({
					format: 'mp3'
				}); //录音开始,
			},
			//录音开始UI效果
			recordBegin(e) {
				this.recording = true;
				this.voiceTis = '松开 结束';
				this.time = new Date().getTime();
				this.recordLength = 0;
				this.recordTimer = setInterval(() => {
					this.recordLength++;
					if (this.recordLength >= 60) {
						this.voiceEnd()
					}
				}, 1000);
			},
			// 录音被打断
			voiceCancel() {
				this.recording = false;
				this.voiceTis = '按住 说话';
				this.recordTis = '手指上滑 取消发送';
				this.willStop = true; //不发送录音
				this.RECORDER.stop(); //录音结束
			},
			// 录音中(判断是否触发上滑取消发送)
			voiceIng(e) {
				if (!this.recording) {
					return;
				}
				let touche = e.touches[0];
				//上滑一个导航栏的高度触发上滑取消发送
				if (this.initPoint.Y - touche.clientY >= uni.upx2px(100)) {
					this.willStop = true;
					this.recordTis = '松开手指 取消发送';
				} else {
					this.willStop = false;
					this.recordTis = '手指上滑 取消发送';
				}
			},
			// 结束录音
			voiceEnd(e) {
				if (!this.recording) {
					return;
				}
				this.recording = false;
				this.voiceTis = '按住 说话';
				this.recordTis = '手指上滑 取消发送';
				if (this.recordLength <= 0) {
					this.$pv.msg('说话时间太短')
					return
				}
				this.RECORDER.stop(); //录音结束
			},
			//录音结束(回调文件)
			async recordEnd(e) {
				const that = this;
				clearInterval(that.recordTimer);
				if (!that.willStop && parseInt(that.recordTimer) > 1) {
					let fileDownloadUrl = await that.uploading(e.tempFilePath);
					that.$im.sendMediaMessage({
							fileLocalPath: e.tempFilePath,
							fileDownloadUrl: fileDownloadUrl,
							fileSize: that.recordLength,
							type: 13,
						},
						that.convInfo.id, 2, {},
						(message, currentSize, totalSize) => {
							console.warn('file process', {
								message,
								currentSize,
								totalSize
							});
						},
					).then(res => {
						console.log(res.message, "---------look");
						that.list.push(res.message);
						that.scrollBottom()
					})
					// const url = await that.$upload(e.tempFilePath);
					// that.$store.dispatch('socket/send', {
					// 	event: 'chat',
					// 	data: {
					// 		chat_uuid: that.chat_uuid,
					// 		msg_type: "voice",
					// 		content: JSON.stringify({
					// 			url: url,
					// 			length: that.recordLength,
					// 		})
					// 	}
					// })
				}
				this.willStop = false;
			},
			async uploading(url, tempKey) {
				let _this = this;
				let r = await this.$api.upload(
					'/Community/Upload', {
						path: url
					},
					pro => {

					}
				);
				return r;
			},
			// 140-400
			getWidth(length) {
				const len = length >= 50 ? 14 : length >= 40 ? 13 : length >= 30 ? 12 : length >= 20 ? 11 : length >= 10 ?
					10 :
					length
				return 140 + 15 * len
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.bg2 {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.2);
		z-index: 33;

		.redpacket {
			width: 500rpx;
			height: 750rpx;
			position: absolute;
			left: 120rpx;
			top: 140rpx;
			z-index: 99;
			background-color: #d2513e;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;

			.up {
				height: 400rpx;
				width: 100%;
				background-color: #db5844;
				border-bottom-left-radius: 50%;
				border-bottom-right-radius: 50%;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
				position: relative;

				.qiang {
					width: 120rpx;
					height: 120rpx;
					line-height: 120rpx;
					text-align: center;
					font-size: 30px;
					font-weight: 900;
					border-radius: 50%;
					background-color: #d7ca93;
					color: #000;
					position: absolute;
					bottom: -60rpx;
					left: 50%;
					margin-left: -60rpx;
				}

				.url {
					width: 80rpx;
					height: 80rpx;
					margin-top: 30rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.name {
					color: #d7ca93;
					font-size: 14px;
					margin-top: 10rpx;
				}

				.title {
					font-size: 18px;
					color: #d7ca93;
					margin-top: 20rpx;
					font-weight: 700;
				}
			}

			.hongbao {
				width: 60rpx;
				height: 60rpx;
				box-sizing: border-box;
				margin-top: 220rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.norm {
		position: absolute;
		top: 0;
		left: 5rpx;
		z-index: 8;
		width: 100rpx;
		height: 60rpx;
		color: #ffffff;
		display: inline-block;
		margin-left: 5rpx;
		font-size: 20px;
		letter-spacing: 1.5px;
		font-weight: 700;
	}

	.requirement {
		width: 600rpx;
		height: 800rpx;
		background-color: #fff;
		border-radius: 20rpx;
		position: absolute;
		z-index: 12;
		top: 50%;
		left: 50%;
		margin-top: -500rpx;
		margin-left: -300rpx;

		text {
			position: relative;
			color: #000;
			display: inline-block;
			font-size: 16px;
			line-height: 40rpx;
			padding: 30rpx;
		}

		.confirm {
			width: 140rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			border-radius: 30rpx;
			position: absolute;
			left: 50%;
			bottom: 30rpx;
			margin-left: -70rpx;
			background-color: #000;
			color: #fff;
			letter-spacing: 1.5px;
		}
	}

	view {
		box-sizing: border-box;
	}

	.scroll {
		height: calc(100vh - 100rpx);
		// transition: all 0.05s linear;
	}

	.chat-more {


		&.more-show {
			transform: translate3d(0, -320rpx, 0);
		}

		width: 100%;
		height: 320rpx;
		padding: 0rpx 20rpx 80rpx;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		position: fixed;
		bottom: -320rpx;
		background-color: #EEEFF1;
		z-index: 20;
		transition: all 0.08s linear;

		.chat-cell {
			width: 25%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			position: relative;
			margin-bottom: 20rpx;

			.chat-icon {
				width: 100rpx;
				height: 100rpx;
				background-color: #fff;
				border-radius: 15rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			text {
				color: #181818;
				font-size: 28rpx;
				margin-top: 10rpx;
			}

			.chat-member {
				padding: 2rpx 8rpx;
				color: #e64c73;
				border: 2rpx solid #e64c73;
				position: absolute;
				right: 0;
				top: 35rpx;
				font-size: 18rpx;
				border-radius: 4rpx;
				line-height: 32rpx;
				background-color: #e55252;
				color: #ffffff;
			}
		}
	}

	.chat-box {
		width: 100%;
		display: flex;
		align-items: flex-start;
		padding: 5rpx 30rpx;
		position: fixed;
		bottom: 0;
		background-color: #EEEFF1;

		&.more-show {
			transform: translate3d(0, -320rpx, 0);
		}

		transition: all 0.08s linear;

		.box-switch {
			width: 100rpx;
			height: 100rpx;

			image {
				width: 100%;
				height: 100%;
				display: block;
			}
		}

		.box-input {
			flex: 1;
			margin: 15rpx 10rpx;
			min-height: 70rpx;
			display: flex;
			background: #FFF;
			border-radius: 10rpx;
			padding: 18rpx 20rpx;

			&.box-btn {
				padding: 0;
				align-items: center;
				justify-content: center;
				color: #000;
				font-size: 32rpx;
			}

			textarea {
				width: 100%;
				max-height: 400rpx;
				min-height: 32rpx;
				line-height: 34rpx;
				font-size: 28rpx;
				color: #000;
			}
		}

		.box-add {
			width: 70rpx;
			height: 100rpx;
			display: flex;
			align-items: center;

			image {
				width: 100%;
				height: 100%;
				display: block;
			}
		}

		.box-send {
			width: 100rpx;
			height: 68rpx;
			margin-top: 17rpx;
			margin-left: 15rpx;
			font-size: 24rpx;
			color: #4C310C;
			background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.hidden {
		display: none !important;
	}

	.record {
		width: 40vw;
		height: 40vw;
		position: fixed;
		top: 55%;
		left: 30%;
		background-color: rgba(0, 0, 0, 0.6);
		border-radius: 20rpx;

		.ing {
			width: 100%;
			height: 30vw;
			display: flex;
			justify-content: center;
			align-items: center;

			// 模拟录音音效动画
			@keyframes volatility {
				0% {
					background-position: 0% 130%;
				}

				20% {
					background-position: 0% 150%;
				}

				30% {
					background-position: 0% 155%;
				}

				40% {
					background-position: 0% 150%;
				}

				50% {
					background-position: 0% 145%;
				}

				70% {
					background-position: 0% 150%;
				}

				80% {
					background-position: 0% 155%;
				}

				90% {
					background-position: 0% 140%;
				}

				100% {
					background-position: 0% 135%;
				}
			}

			.icon {
				background-image: linear-gradient(to bottom, #f09b37, #fff 50%);
				background-size: 100% 200%;
				animation: volatility 1.5s ease-in-out -1.5s infinite alternate;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				font-size: 150rpx;
				color: #f09b37;
			}
		}

		.cancel {
			width: 100%;
			height: 30vw;
			display: flex;
			justify-content: center;
			align-items: center;

			.icon {
				color: #fff;
				font-size: 150rpx;
			}
		}

		.tis {
			width: 100%;
			height: 10vw;
			display: flex;
			justify-content: center;
			font-size: 28rpx;
			color: #fff;

			&.change {
				color: #f09b37;
			}
		}
	}

	@font-face {
		font-family: 'HMfont-home';
		src: url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');
	}

	.icon {
		font-family: 'HMfont-home' !important;
		font-size: 56rpx;
		font-style: normal;
		color: #333;

		&.biaoqing:before {
			content: '\e797';
		}

		&.jianpan:before {
			content: '\e7b2';
		}

		&.yuyin:before {
			content: '\e805';
		}

		&.tupian:before {
			content: '\e639';
		}

		&.chehui:before {
			content: '\e904';
		}

		&.luyin:before {
			content: '\e905';
		}

		&.luyin2:before {
			content: '\e677';
		}

		&.other-voice:before {
			content: '\e667';
		}

		&.my-voice:before {
			content: '\e906';
		}

		&.hongbao:before {
			content: '\e626';
		}

		&.tupian2:before {
			content: '\e674';
		}

		&.paizhao:before {
			content: '\e63e';
		}

		&.add:before {
			content: '\e655';
		}

		&.close:before {
			content: '\e607';
		}

		&.to:before {
			content: '\e675';
		}
	}

	.chat-item {
		display: flex;
		padding: 20rpx 30rpx;

		&.flex-flow {
			flex-flow: row-reverse;

			.chat-content {
				background: #38D99D;

				&::after {
					left: unset;
					top: 30rpx;
					right: -16rpx;
					border-width: 16rpx 0 12rpx 24rpx;
					border-color: transparent transparent transparent #38D99D;
				}
			}

			.chat-voice {
				background: #38D99D;
				justify-content: flex-end;

				.bo-image {
					transform: rotate(180deg);
				}

				&::after {
					left: unset;
					top: 30rpx;
					right: -16rpx;
					border-width: 16rpx 0 12rpx 24rpx;
					border-color: transparent transparent transparent #38D99D;
				}
			}

			.chat-imgs {
				// &::after {
				// 	left: unset;
				// 	top: 30rpx;
				// 	right: -16rpx;
				// 	border-width: 16rpx 0 12rpx 24rpx;
				// 	border-color: transparent transparent transparent #fff;
				// }
			}

			.system-content {
				color: #ebebeb;
				background-color: #999;

			}
		}

		.chat-head {
			flex-shrink: 0;
			width: 90rpx;
			height: 90rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
				display: block;
			}
		}

		.chat-content {
			max-width: 480rpx;
			margin: 0 20rpx;
			background-color: #fff;
			border-radius: 12rpx;
			font-size: 28rpx;
			line-height: 36rpx;
			padding: 20rpx 20rpx 20rpx 20rpx;
			color: #181818;
			display: flex;
			align-items: center;
			position: relative;
			user-select: text;

			&::after {
				content: '';
				position: absolute;
				top: 30rpx;
				left: -16rpx;
				width: 0;
				height: 0;
				border-width: 16rpx 24rpx 12rpx 0;
				border-style: solid;
				border-color: transparent #fff transparent transparent;
			}
		}

		.chat-voice {
			max-width: 480rpx;
			margin: 0 20rpx;
			background-color: #fff;
			border-radius: 12rpx;
			font-size: 28rpx;
			line-height: 36rpx;
			padding: 20rpx 20rpx 20rpx 20rpx;
			color: #181818;
			display: flex;
			align-items: center;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				top: 30rpx;
				left: -16rpx;
				width: 0;
				height: 0;
				border-width: 16rpx 24rpx 12rpx 0;
				border-style: solid;
				border-color: transparent #fff transparent transparent;
			}

			image {
				display: block;
			}

			.bo-image {
				width: 23rpx;
				height: 30rpx;
				margin-left: 10rpx;
				margin-right: 10rpx;
			}
		}

		.chat-imgs {
			width: 250rpx;
			margin: 0 20rpx;
			border-radius: 12rpx;
			background-color: #fff;
			position: relative;

			image {
				width: 100%;
				height: 100%;
				border-radius: 12rpx;
			}

			// &::after {
			// 	content: '';
			// 	position: absolute;
			// 	top: 30rpx;
			// 	left: -16rpx;
			// 	width: 0;
			// 	height: 0;
			// 	border-width: 16rpx 24rpx 12rpx 0;
			// 	border-style: solid;
			// 	border-color: transparent #fff transparent transparent;
			// 	z-index: -1;
			// }
		}

		.chat-weixin {
			display: flex;
			align-items: center;
			height: 100rpx;

			.weixin-icon {
				padding-top: 20rpx;

				image {
					width: 80rpx;
					height: 80rpx;
				}
			}

			.weixin-no {
				font-size: 26rpx;
				color: #4C310C;

				span {
					color: #999;
				}

				view {
					font-weight: 600;
					font-size: 34rpx;
					color: #000;
				}
			}
		}
	}

	.fit-bottom {
		padding-bottom: calc(env(safe-area-inset-bottom) / 2) !important;
	}

	.weixin {
		width: 650rpx;
		background-color: #fff;
		border-radius: 12rpx;
		padding-bottom: 40rpx;

		.weixin-title {
			text-align: center;
			color: #000;
			padding-top: 40rpx;
		}

		.weixin-desc {
			color: #999;
			font-size: 24rpx;
			text-align: center;
			padding-top: 20rpx;
		}

		.weixin-price {
			font-size: 34rpx;
			padding-top: 40rpx;
			color: #000;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			image {
				width: 100rpx;
				height: 100rpx;
			}
		}

		.weixin-btn {
			padding: 30rpx 50rpx 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.btn-cancel {
				width: 220rpx;
				height: 70rpx;
				border-radius: 15rpx;
				color: #4C310C;
				font-size: 32rpx;
				letter-spacing: 2px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #B98B51
			}

			.btn-comfirm {
				width: 220rpx;
				height: 70rpx;
				border-radius: 15rpx;
				background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
				color: #4C310C;
				font-size: 32rpx;
				letter-spacing: 2px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #FEF0BC;
			}

			.btn-gift {
				width: 420rpx;
				height: 70rpx;
				border-radius: 15rpx;
				background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
				color: #ffffff;
				font-size: 32rpx;
				letter-spacing: 2px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #FEF0BC;
			}
		}
	}

	.chat-time {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;

		text {
			padding: 5rpx 15rpx;
			font-size: 24rpx;
			color: #4C310C;
			background-color: #fff;
			border-radius: 2rpx;
		}
	}

	.chat-notice {
		position: fixed;
		top: 10rpx;
		left: 50%;
		margin-left: -200rpx;
		font-size: 15px;
		color: #000;
		width: 400rpx;
		height: 60rpx;
		overflow: hidden;
		border-radius: 15rpx;
		z-index: 7;
		text-align: center;
		line-height: 60rpx;
		background-color: #fff;
	}

	.chat-wx {
		box-sizing: border-box;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		color: #e5e5e5;

		.top {
			position: relative;
			box-sizing: border-box;
			border-top-right-radius: 5rpx;
			border-top-left-radius: 5rpx;
			height: 170rpx;
			width: 100%;
			background-color: #fa9c3c;
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 20rpx 30rpx;

			.hongbao {
				width: 80rpx;
				height: 90rpx;

				image {
					width: 100%;
					height: 100%;
				}

			}

			.text {
				height: 90rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				text {
					color: #fff;
					font-size: 14px;
				}
			}

			.sanjiao1 {
				width: 0;
				height: 0;
				border-top: 15rpx solid transparent;
				border-left: 20rpx solid #fa9c3c;
				border-bottom: 15rpx solid transparent;
				position: absolute;
				top: 20rpx;
				right: -20rpx;
			}

			.sanjiao2 {
				width: 0;
				height: 0;
				border-top: 15rpx solid transparent;
				border-right: 20rpx solid #fa9c3c;
				border-bottom: 15rpx solid transparent;
				position: absolute;
				top: 20rpx;
				left: -20rpx;
			}
		}

		.bottom {
			box-sizing: border-box;
			width: 100%;
			height: 60rpx;
			line-height: 60rpx;
			padding-left: 40rpx;
			color: #835d5f;
			background-color: #fff;
			border-bottom-right-radius: 5rpx;
			border-bottom-left-radius: 5rpx;
		}

		.red_money {
			color: #ea4e75
		}

		&.chat-bg {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			width: 460rpx;
			height: 200rpx;
			margin: 0rpx auto 0;
			border-radius: 12rpx;
			color: #ffffff;
		}

		&.chat-own {
			margin-right: 30rpx;
		}

		&.chat-on {
			margin-left: 30rpx;
		}

		.wx-btn {
			width: 400rpx;
			padding: 20rpx 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.btn-cancel {
				width: 150rpx;
				height: 50rpx;
				border-radius: 10rpx;
				color: #4C310C;
				font-size: 28rpx;
				letter-spacing: 2px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #B98B51
			}

			.btn-comfirm {
				width: 150rpx;
				height: 50rpx;
				border-radius: 10rpx;
				background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
				color: #4C310C;
				font-size: 28rpx;
				letter-spacing: 2px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #FEF0BC;
			}

			.btn-gift {
				width: 420rpx;
				height: 70rpx;
				border-radius: 15rpx;
				//background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
				color: #4C310C;
				font-size: 32rpx;
				letter-spacing: 2px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #FEF0BC;
			}
		}
	}

	.wifi-symbol {
		width: 50rpx;
		height: 50rpx;
		box-sizing: border-box;
		position: relative;
		/*必须，否则苹果overflow失效*/
		overflow: hidden;
		transform: rotate(-45deg) translate3d(-10rpx, -10rpx, 0rpx);

		.wifi-circle {
			border: 4rpx solid #000;
			border-radius: 50%;
			position: absolute;
		}

		.first {
			width: 5rpx;
			height: 5rpx;
			background: #000;
			top: 45rpx;
			left: 45rpx;
		}

		.second {
			width: 25rpx;
			height: 25rpx;
			top: 35rpx;
			left: 35rpx;
		}

		.third {
			width: 40rpx;
			height: 40rpx;
			top: 25rpx;
			left: 25rpx;
		}

		&.animation {
			.second {
				animation: fadeInOut 1s infinite 0.2s;
			}

			.third {
				animation: fadeInOut 1s infinite 0.4s;
			}
		}

		&.direction {
			transform: rotate(135deg) translate3d(-10rpx, -10rpx, 0rpx);
		}

		@keyframes fadeInOut {
			0% {
				opacity: 0;
				/*初始状态 透明度为0*/
			}

			100% {
				opacity: 1;
				/*结尾状态 透明度为1*/
			}
		}
	}

	.popup-mall {
		background-color: #111111;
		width: 100%;
		padding-bottom: 20rpx;
		height: 100vh;
		position: relative;

		.popup-close {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}

		.popup-title {
			padding: 20rpx 0 10rpx;
			text-align: center;
			font-size: 32rpx;
			position: relative;
			color: #ffffff;
		}

		.popup-wrap {
			// max-height: 800rpx;
			// min-height: 300rpx;
			height: 100vh;
			padding-top: 10rpx;
			padding-bottom: 30rpx;


			.popup-mall-list {
				padding: 0 30rpx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				padding-bottom: 100rpx;

				.popup-mall-item {
					background-color: #fff;
					width: 48%;
					height: 420rpx;
					padding: 20rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					// border: 2rpx solid #000000;
					border-radius: 20rpx;
					margin-bottom: 20rpx;

					image {
						width: 200rpx;
						height: 200rpx;
					}

					.popup-mall-item-title {
						color: #333;
						font-size: 26rpx;
						margin: 30rpx 0;
						height: 70rpx;
					}

					.popup-mall-item-info {
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 100%;

						.popup-mall-item-info-left {
							display: flex;
							align-items: center;

							text {
								color: #B98B51;
							}

							.f-24 {
								font-size: 24rpx;
							}
						}

						.popup-mall-item-info-right {
							display: flex;
							justify-content: center;
							align-content: center;
							border-radius: 18rpx;
							background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
							color: #4C310C;
							font-size: 24rpx;
							padding: 7rpx 18rpx;
						}
					}
				}
			}
		}

		.popup-btn {
			position: fixed;
			bottom: 40rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			flex-direction: column;
			align-content: center;

			.popup-btn-img {
				margin: 0 auto;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 160rpx;
				height: 160rpx;
				background-color: #B98B51;
				border-radius: 100%;
				position: relative;

				image {
					width: 80rpx;
					height: 80rpx;
				}

				.popup-btn-img-num {
					position: absolute;
					right: -18rpx;
					top: -12rpx;

					/deep/ .u-badge {
						font-size: 32rpx;
						width: 30rpx;
						height: 30rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}

			.popup-btn-btn {
				margin-top: 20rpx;
				padding: 12rpx 42rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 34rpx;
				background: linear-gradient(180deg, #37373c 0%, #1d1c23 100%);
				color: #fff;
			}
		}
	}

	.x-popup {
		background-color: #ffffff;
		width: 650rpx;
		border-radius: 20rpx;
		padding-bottom: 20rpx;

		.popup-title {
			padding: 20rpx 0 10rpx;
			text-align: center;
			font-size: 32rpx;
			position: relative;
			color: #333;

			.xiaoju-popup-close {
				font-size: 40rpx;
				position: absolute;
				right: 50rpx;
				top: 25rpx;
				color: #333;
			}
		}

		.popup-wrap {
			max-height: 800rpx;
			min-height: 300rpx;
			padding-top: 10rpx;
			padding-bottom: 30rpx;

			.popup-cell {
				padding: 8rpx 40rpx;
				font-size: 30rpx;
				line-height: 44rpx;
			}
		}

		.popup-btn {
			position: fixed;
			margin: 0 auto;
			width: 220rpx;
			height: 75rpx;
			border-radius: 10rpx;
			color: #4C310C;
			font-size: 32rpx;
			letter-spacing: 2px;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid #B98B51
		}
	}

	.x-list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		padding: 0 40rpx;

		.list-cell {
			width: 25%;
			height: 190rpx;
			border: 2rpx solid #fff;
			display: flex;
			align-items: center;
			flex-direction: column;
			padding: 20rpx 0rpx 10rpx;
			border-radius: 16rpx;
			position: relative;

			&.list-active {
				border-radius: 16rpx;
				border: 2rpx solid #70737C;
			}

			.list-btn {
				width: calc(100% + 4rpx);
				height: 52rpx;
				color: #fff;
				background: #FD4C61;
				border-radius: 0rpx 0rpx 16rpx 16rpx;
				position: absolute;
				bottom: -2rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
			}

			.list-icon {
				width: 80rpx;
				height: 80rpx;
			}

			.list-name {
				color: #333;
				font-size: 26rpx;
				margin-top: 8rpx;
			}

			.list-price {
				color: #333;
				font-size: 22rpx;
				margin-top: 5rpx;
			}
		}
	}
</style>